<template>
  <div>
    <div class="carousel-container">
      <el-carousel v-if="bannerList.length > 0" style="width: calc(100% - 260px);height: 450px" :interval="5000"
                   arrow="always">
        <el-carousel-item v-for="(item, index) in bannerList" :key="index" style=" height: 450px">
          <img class="carousel-image" :src="item.bannerUrl" alt="Banner Image" style="width: 100%;height: 100%">
        </el-carousel-item>
      </el-carousel>
    </div>

    <div style="margin-top: 10px">
      <div class="top-course">
      <span style="margin-left: 128px; font-size: 28px; font-weight: normal; display: flex;">
        品质课程
      </span>
      </div>

      <div class="course-cards main animate__animated animate__fadeInLeft">
        <el-row :gutter="20">
          <el-col :span="8" v-for="(course, index) in courseTopList" :key="index" style="margin-top: 10px">
            <div @click="openCourseDetail(course.id)">
              <el-card :header="course.courseName" shadow="hover" class="course-card">
                <img :src="course.courseHover" class="course-image"/>
                <div style="text-align: left; margin-top: 10px;">
                  <hr>
                  <span class="course-description">{{ course.courseDescription }}</span>
                  <img style="width: 15px;height: 15px;margin-left: 10px;margin-top: 5px"
                       src="../assets/images/collect.png"><span>{{ course.collectNumber }}</span>
                  <img style="width: 15px;height: 15px;margin-left: 10px"
                       src="../assets/images/like.png"><span>{{ course.likeNumber }}</span>
                  <span class="course-price">{{ course.courseTypeName }}</span>
                </div>
              </el-card>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <div style="margin-top: 10px">
      <div class="top-teacher">
      <span style="margin-left: 128px; font-size: 28px; font-weight: normal; margin-top: 10px">
        优质讲师
      </span>
      </div>

      <div class="teacher-cards main animate__animated animate__fadeInLeft">
        <el-row :gutter="20">
          <el-col :span="8" v-for="(teacher, index) in teacherTopList" :key="index" style="margin-top: 10px">
            <div @click="openTeacherDetail(teacher.id)">

              <el-card :header="teacher.teacherName" shadow="hover" class="teacher-card">
                <img :src="teacher.teacherAvatar" class="teacher-image" alt=""/>
                <div style="text-align: left; margin-top: 10px;">
                  <hr>
                  <span class="teacher-description">{{ teacher.teacherDescription }}</span>
                  <img style="width: 15px;height: 15px;margin-left: 10px;margin-top: 5px"
                       src="../assets/images/like.png" alt=""><span>{{ teacher.likeNumber }}</span>
                  <span class="teacher-level">{{ teacher.teacherLevelName }}</span>
                  <span class="teacher-type">{{ teacher.teacherTypeName }}</span>
                </div>
              </el-card>
            </div>
          </el-col>
        </el-row>

    </div>
  </div>

  <div style="margin-top: 10px">
    <div class="top-teacher">
      <span style="margin-left: 128px; font-size: 28px; font-weight: normal; margin-top: 10px">
        精选文章
      </span>
    </div>

    <div class="teacher-cards main animate__animated animate__fadeInLeft">
      <el-row :gutter="20">
        <el-col :span="8" v-for="(article, index) in articleTopList" :key="index" style="margin-top: 10px">
          <div @click="openArticleDetail(article.id)">

          <el-card :header="article.articleTitle" class="teacher-card"
                   style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
            <img :src="article.articleHover" class="teacher-image" alt=""/>
            <div style="text-align: left; margin-top: 10px;">
              <hr>

              <span class="teacher-description">{{ article.articleTypeName }}</span>
              <img style="width: 15px; height: 15px; background-color: transparent !important;margin-left: 180px"
                   src="@/assets/images/browse.png" alt="">
              <span>{{ article.browerNumber }}</span>
              <img style="width: 15px;height: 15px;margin-left: 10px;margin-top: 5px"
                   src="../assets/images/like.png" alt=""><span>{{ article.likeNumber }}</span>
              <img style="width: 15px; height: 15px;margin-left: 10px; background-color: transparent;"
                   src="@/assets/images/collect.png"
                   alt="">
              <span>{{ article.collectNumber }}</span>
            </div>
          </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>

  <div style="margin-top: 10px">
    <div class="top-teacher">
      <span style="margin-left: 128px; font-size: 28px; font-weight: normal; margin-top: 10px">
        趣味问题
      </span>
    </div>

    <div class="teacher-cards main animate__animated animate__fadeInLeft">
      <el-row :gutter="20">
        <el-col :span="8" v-for="(question, index) in problemTopList" :key="index" style="margin-top: 10px">
          <div @click="openQuestionDetail(question.id)">

          <el-card :header="question.problemTitle" class="teacher-card"
                   style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
            <img :src="question.problemHover" class="teacher-image" alt=""/>
            <div style="text-align: left; margin-top: 10px;">
              <hr>

              <span class="teacher-description">{{ question.problemTypeName }}</span>
              <img style="width: 15px; height: 15px; background-color: transparent !important;margin-left: 170px"
                   src="@/assets/images/browse.png" alt="">
              <span>{{ question.browerNumber }}</span>
              <img style="width: 15px;height: 15px;margin-left: 10px;margin-top: 5px"
                   src="../assets/images/like.png" alt=""><span>{{ question.likeNumber }}</span>
              <img style="width: 15px; height: 15px;margin-left: 10px; background-color: transparent;"
                   src="@/assets/images/collect.png"
                   alt="">
              <span>{{ question.collectNumber }}</span>
            </div>
          </el-card>
          </div>

        </el-col>
      </el-row>
    </div>
  </div>

  <div style="margin-top: 10px">
    <div class="top-teacher">
      <span style="margin-left: 128px; font-size: 28px; font-weight: normal; margin-top: 10px">
        优秀学生
      </span>
    </div>

    <div class="teacher-cards main animate__animated animate__fadeInLeft">
      <el-row :gutter="20">
        <el-col :span="8" v-for="(student, index) in studentTopList" :key="index" style="margin-top: 10px">
          <el-card :header="student.studentName" class="teacher-card"
                   style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
            <img :src="student.studentAvatar" class="teacher-image" alt=""/>
            <div style="text-align: left; margin-top: 10px;">
              <hr>

              <span class="teacher-description">{{ student.studentIntroduction }}</span>
              <img style="width: 15px;height: 15px;margin-left: 10px;margin-top: 5px"
                   src="../assets/images/like.png" alt=""><span>{{ student.likeNumber }}</span>
              <span class="course-price">{{ student.levelName }}</span>

            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>


  </div>
</template>
<script>
import course from "./course/Course.vue";

export default {
  computed: {
    course() {
      return course
    }
  },
  data() {
    return {
      bannerList: [],
      courseTopList: [],
      teacherTopList: [],
      articleTopList: [],
      studentTopList: [],
      problemTopList: []
    }
  },
  created() {
    // Initialize carousel data
    this.getBannerList()
    this.getCourseTopList()
    this.getTeacherTopList()
    this.getArticleTopList()
    this.getStudentTopList()
    this.getProblemTopList()
  },
  methods: {
    // Method to fetch banner data
    getBannerList() {
      this.request.get('banner/banner/findBannerTopList')
          .then(res => {
            // Check if data is received properly
            console.log('Received banner list:', res.bannerList);
            // Update bannerList data
            this.bannerList = res.bannerList;
          })
          .catch(error => {
            // Handle errors
            console.error('Error fetching banner list:', error);
          });
    },
    getCourseTopList() {
      this.request.get('/course/course/findCourseTopList')
          .then(res => {
            if (res.code === 200) {
              this.courseTopList = res.courseTopList
            }
          })
    },
    getTeacherTopList() {
      this.request.get('/teacher/teacher/findTeacherTopList')
          .then(res => {
            if (res.code === 200) {
              this.teacherTopList = res.teacherTopList
            }
          })
    },
    getArticleTopList() {
      this.request.get('/article/article/findArticleTopList')
          .then(res => {
            if (res.code === 200) {
              this.articleTopList = res.articleTopList
            }
          })
    },
    getStudentTopList() {
      this.request.get('student/student/findStudentTopList')
          .then(res => {
            if (res.code === 200) {
              this.studentTopList = res.studentTopList
            }
          })
    },
    getProblemTopList() {
      this.request.get('problem/problem/findProblemTopList')
          .then(res => {
            if (res.code === 200) {
              console.log(res.questionTopList)
              this.problemTopList = res.problemTopList
            }
          })
    },
    openCourseDetail(id) {
      this.$router.push(`/courseDetail/${id}`);
    },
    openTeacherDetail(id) {
      this.$router.push(`/teacherDetail/${id}`);
    },
    openArticleDetail(id) {
      this.$router.push(`/articleDetail/${id}`);
    },
    openQuestionDetail(id) {
      this.$router.push(`/questionDetail/${id}`);
    }
  }
}
</script>


<style scoped>
body {
  background-color: #e4e6eb;
}

.carousel-container {
  display: flex;
  justify-content: center;
  //height: 500px; /* Adjust the height as needed */
}

.top-course {
  margin-top: 5px
}

.course-cards {
  width: 84.5%;
  height: 250px;
  border-radius: 7px;
  margin-left: 128px;
  margin-top: 5px;

}

.course-cards:hover {
  cursor: pointer;
}

.course-image {
  width: 100%;
  height: 250px;

}

.course-description {
  padding: 3px 6px;

  float: left;
  background-color: orange;
  color: #fff;
  font-size: 16px;
  border-radius: 5px;
}

.course-price {
  float: right;
  padding: 3px 6px;
  background-color: #ff1a1a;
  color: #fff;
  font-size: 16px;
  border-radius: 5px;
}


.top-teacher {
  margin-top: 5px
}

.teacher-cards {
  width: 84.5%;
  height: 250px;
  border-radius: 7px;
  margin-left: 128px;
  margin-top: 5px;

}

.teacher-cards:hover {
  cursor: pointer;
}

.teacher-image {
  width: 100%;
  height: 250px;

}

.teacher-description {
  padding: 3px 6px;

  float: left;
  background-color: orange;
  color: #fff;
  font-size: 16px;
  border-radius: 5px;
}


.teacher-type {
  float: right;
  padding: 3px 6px;
  background-color: #52bcce;
  color: #fff;
  font-size: 16px;
  margin-right: 5px;
  border-radius: 5px;
}

.teacher-level {
  float: right;
  padding: 3px 6px;
  background-color: #ff1a1a;
  color: #fff;
  font-size: 16px;
  border-radius: 5px;
  margin-right: 5px;
}

.el-card__header {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.free-price {
  background-color: #4CAF50; /* 设置绿色背景 */
}
</style>
